import axios from 'axios'
import React from 'react'
import { Col, Row, Select, Button, Rate } from 'antd'
import { useState, useEffect } from 'react'
import './ConstellationList.css'

export default function ConstellationList() {
  const [typeText, setTypeText] = useState('scorpio')
  const [timeText, setTimeText] = useState('today')
  const [resData, setresdata] = useState([])

  const typeList = [
    {
      value: 'aries',
      label: '白羊座',
    },
    {
      value: 'taurus',
      label: '金牛座',
    },
    {
      value: 'gemini',
      label: '双子座',
    },
    {
      value: 'cancer',
      label: '巨蟹座',
    },
    {
      value: 'leo',
      label: '狮子座',
    },
    {
      value: 'virgo',
      label: '处女座',
    },
    {
      value: 'libra',
      label: '天秤座',
    },
    {
      value: 'scorpio',
      label: '天蝎座',
    },
    {
      value: 'sagittarius',
      label: '射手座',
    },
    {
      value: 'capricorn',
      label: '摩羯座',
    },
    {
      value: 'aquarius',
      label: '水瓶座',
    },
    {
      value: 'pisces',
      label: '双鱼座',
    },
  ]

  const timeList = [
    {
      value: 'today',
      label: '今天',
    },
    {
      value: 'nextday',
      label: '明天',
    },
    {
      value: 'week',
      label: '一周',
    },
    {
      value: 'year',
      label: '一年',
    },
  ]

  // useEffect(() => {
  //   axios.get('https://api.vvhan.com/api/horoscope?type=' + typeText + '&time=' + timeText).then(res => {
  //     setresdata(res.data.data);
  //   })
  // }, [])
  const handleChangeType = (value) => {
    setTypeText(value)
  }

  const handleChangeTime = (value) => {
    setTimeText(value)
  }

  const searchChange = () => {
    axios.get('https://api.vvhan.com/api/horoscope?type=' + typeText + '&time=' + timeText).then(res => {
      console.log(res.data.data);
      setresdata(res.data.data);
    })
  }

  return (
    <div>
      <div>
        <Row>
          <Col span={4}>
            星座:
            <Select
              defaultValue="请选择"
              style={{
                width: 200,
              }}
              onChange={handleChangeType}
              options={typeList}
            />
          </Col>
          <Col span={4}>
            时间:
            <Select
              defaultValue="请选择"
              style={{
                width: 200,
              }}
              onChange={handleChangeTime}
              options={timeList}
            />
          </Col>
          <Col span={3}>
            <Button type="primary" onClick={() => searchChange()}>查询</Button>
          </Col>
        </Row>
      </div>
      <div style={{ borderTop: '2px solid #ccc', marginTop: '20px' }}>
        {
          resData == '' ? '' : <div className='constellationBox'>
            <div className='xTitleBox'>
              {resData.title}
            </div>
            {/* <div>时间:{resData.time}</div> */}
            <div className='wen12' style={{ fontSize: '18px', fontWeight: '800' }}>运势:</div>
            <div style={{ display: 'flex', marginBottom: '10px' }}>
              <div className='wen1' style={{ fontSize: '16px', fontWeight: '800', marginRight: '25px' }}><span style={{ marginRight: '6px' }}>综合运势:</span> <Rate value={resData.fortune.all} /></div>
              <div className='wen1' style={{ fontSize: '16px', fontWeight: '800', marginRight: '25px' }}><span style={{ marginRight: '6px' }}>爱情运势: </span><Rate value={resData.fortune.love} /></div>
              <div className='wen1' style={{ fontSize: '16px', fontWeight: '800', marginRight: '25px' }}><span style={{ marginRight: '6px' }}>学业工作: </span><Rate value={resData.fortune.work} /></div>
              <div className='wen1' style={{ fontSize: '16px', fontWeight: '800', marginRight: '25px' }}><span style={{ marginRight: '6px' }}>财富运势: </span><Rate value={resData.fortune.money} /></div>
            </div>
            <div className='wen12' style={{ fontSize: '18px', fontWeight: '800', marginTop: '6px', marginBottom: '6px' }}>指数:</div>
            <div style={{ display: 'flex', marginBottom: '10px' }}>
              <div className='wen2' style={{ fontSize: '16px', fontWeight: '800', marginRight: '25px' }}>健康指数: {resData.index?.health}</div>
              <div className='wen2' style={{ fontSize: '16px', fontWeight: '800', marginRight: '25px' }}>商谈指数: {resData.index?.discuss}</div>
            </div>
            <div className='wen3' style={{ fontSize: '16px', fontWeight: '800', marginBottom: '6px', marginTop: '6px' }}>幸运颜色: {resData.luckycolor}</div>
            <div className='wen4' style={{ fontSize: '16px', fontWeight: '800', marginBottom: '6px' }}>幸运数字: {resData.luckynumber}</div>
            <div className='wen5' style={{ fontSize: '16px', fontWeight: '800', marginBottom: '6px' }}>速配星座: {resData.luckyconstellation}</div>
            <div className='wen6' style={{ fontSize: '16px', fontWeight: '800', marginBottom: '6px' }}>短评: {resData.shortcomment}</div>
            <div className='wen12' style={{ fontSize: '18px', fontWeight: '800', marginBottom: '6px', marginTop: '10px' }}>运势解析:</div>
            <div>
              <div className='wen7' style={{ fontSize: '16px', fontWeight: '800', marginTop: '6px' }}><span style={{ marginRight: '16px' }}>综合运势:</span>{resData.fortunetext.all}</div>
              <div className='wen8' style={{ fontSize: '16px', fontWeight: '800', marginTop: '6px' }}><sapn style={{ marginRight: '16px' }}>爱情运势:</sapn>{resData.fortunetext.love}</div>
              <div className='wen9' style={{ fontSize: '16px', fontWeight: '800', marginTop: '6px' }}><span style={{ marginRight: '16px' }}>学业工作:</span>{resData.fortunetext.work}</div>
              <div className='wen10' style={{ fontSize: '16px', fontWeight: '800', marginTop: '6px' }}><span style={{ marginRight: '16px' }}>财富运势:</span>{resData.fortunetext.money}</div>
              <div className='wen11' style={{ fontSize: '16px', fontWeight: '800', marginTop: '6px' }}><span style={{ marginRight: '16px' }}>健康运势:</span>{resData.fortunetext.health}</div>
            </div>
          </div>
        }
      </div>
    </div>
  )
}
